import { t } from 'i18next'
import { AddIcon, StyledWrap } from './style'
import { Button, Modal, Space } from '@kedacom/react-next'
import shallow from 'zustand/shallow'
import { useTvWallStore } from '../store'
import { DragDropContextProvider, Droppable } from '@/plugins/dnd'
import MemberList from '@/components/MemberList'
import Alert from '@/components/Alert'
import { FC, useEffect, useState } from 'react'
import { SpiltEntity } from '@/api/manager/tvwall/interface'
import { DropData } from '@/api/manager/type'
import { MtEntity } from '@/api/manager/mt'
const defaultData = [
	{
		sub_chn_index: 0,
	},
	{
		sub_chn_index: 1,
	},
	{
		sub_chn_index: 2,
	},
	{
		sub_chn_index: 3,
	},
]
export const FourScreenModal: FC = () => {
	/**四分屏数据 */
	const [spilt, setSpilt] = useState<Array<Partial<SpiltEntity>>>(defaultData)
	const {
		update,
		operateBoxInfo,
		boxDetailVOsSource,
		show_mt_name,
		changeTVWallChannel,
		removeStreamDom,
		isFourScreenOpen,
	} = useTvWallStore(
		(state) => ({
			update: state.update,
			operateBoxInfo: state.operateBoxInfo,
			boxDetailVOsSource: state.boxDetailVOsSource,
			show_mt_name: state.show_mt_name,
			changeTVWallChannel: state.changeTVWallChannel,
			removeStreamDom: state.removeStreamDom,
			isFourScreenOpen: state.isFourScreenOpen,
		}),
		shallow
	)
	useEffect(() => {
		if (operateBoxInfo) {
			const _spilt = operateBoxInfo.spilt || []
			if (_spilt.length === 0) {
				setSpilt(JSON.parse(JSON.stringify(defaultData)))
				return
			}
			const _result = spilt
			_spilt.forEach((item) => {
				let _key = item.sub_chn_index
				if (0 <= _key && _key <= 3) {
					_result[_key] = item
				}
			})
			setSpilt(_result)
		} else {
			setSpilt(JSON.parse(JSON.stringify(defaultData)))
		}
	}, [operateBoxInfo, isFourScreenOpen])
	useEffect(() => {
		return () => {
			setSpilt(JSON.parse(JSON.stringify(defaultData)))
		}
	}, [isFourScreenOpen])
	/**确认*/
	const handleConfirm = () => {
		if (!operateBoxInfo) return
		const have_info_list = spilt.filter((item) => {
			return item.mt_id
		})
		if (have_info_list.length === 0) {
			Alert(t('请设置四分屏'))
			return false
		}
		update({ isFourScreenOpen: false })
		/**保存四分屏*/
		const _members = boxDetailVOsSource
			.map((item) => {
				if (item.hdu_id === operateBoxInfo.hdu_id) {
					return { member_type: 9, hdu_id: operateBoxInfo.hdu_id, spilt: have_info_list }
				}
				return null
			})
			.filter(Boolean)
		const params = {
			mode: 1,
			show_mt_name: show_mt_name,
			batch_poll: null,
			members: _members,
		}
		changeTVWallChannel(params)
		removeStreamDom()
	}
	/**清除通道*/
	const clearBox = (sub_chn_index: number) => {
		let _spilt = spilt.map((item, _index) => {
			if (_index === sub_chn_index) {
				return Object.assign({ sub_chn_index: sub_chn_index })
			}
			return item
		})
		setSpilt(_spilt)
	}
	/**关闭模态框 */
	const handleCloseModal = () => {
		update({ isFourScreenOpen: false })
	}
	const handleDrop = (dataTransfer: DropData, index: number) => {
		let sourceData = dataTransfer.data?.mt
		if (sourceData) {
			if (sourceData.isMt && sourceData.stream) {
				Alert(t('该通道不支持此类型终端'))
				return false
			}
			let _spilt = spilt.map((item, _index) => {
				if (_index === index && sourceData) {
					if (sourceData.isMt) {
						return Object.assign({}, sourceData, { sub_chn_index: index })
					} else {
						return Object.assign(
							{},
							{
								mt_id: sourceData.cascade_id,
								mt_key: sourceData.mt_key,
								account: sourceData.conf_id,
								account_type: 5,
								name: sourceData.name,
								portrait: '',
								conf_e164: '',
								online: sourceData.online,
							} as MtEntity,
							{ sub_chn_index: index }
						)
					}
				}
				return item
			})
			setSpilt(_spilt)
		}
	}
	return (
		<Modal
			width={860}
			height={451}
			open={isFourScreenOpen}
			title={t('四分屏设置')}
			okText={false}
			cancelText={false}
			onCancel={handleCloseModal}
		>
			<DragDropContextProvider>
				<StyledWrap className="mcc-vmp-modal-wrap">
					<div style={{ display: 'flex' }}>
						<div className="left-panel">
							<div className="content">
								{spilt.map((item: Partial<SpiltEntity>, index: number) => {
									return (
										<>
											<Droppable onDrop={(dataTransfer) => handleDrop(dataTransfer, index)}>
												{(setDroppableRef) => (
													<div ref={setDroppableRef} className="item">
														{!item.mt_id && <AddIcon></AddIcon>}
														{<span className="name">{item.name || ''}</span>}
														{
															<span
																className="delete"
																onClick={() => {
																	clearBox(item.sub_chn_index || index)
																}}
																title={t('清空通道')}
															></span>
														}
													</div>
												)}
											</Droppable>
										</>
									)
								})}
							</div>
						</div>
						<div className="right-panel">
							<MemberList height={240} />
						</div>
					</div>
					<div className="setting-footer">
						<div className="tip">
							<span className="icon"></span>
							{t('请拖拽与会方至指定的画面中')}
						</div>
						<Space className="right-btn">
							<Button onClick={handleConfirm}>{t('确认')}</Button>
							<Button onClick={handleCloseModal}>{t('关闭')}</Button>
						</Space>
					</div>
				</StyledWrap>
			</DragDropContextProvider>
		</Modal>
	)
}
